<template> <!-- 对战结果页面 -->
	<view class="wrap" v-if="!isLoading">
		<view class="layout-position">
			<!-- 背景音乐 -->
			<!-- 	<view class="layout-music flex justify-end">
				<view class="text m-right-30">背景音乐</view>
				<u-switch v-model="switchValue" size="32" ></u-switch>
			</view> -->
			<!-- 我的 -->
			<view class="layout-me flex justify-between direction-column align-center">
				<avatar-image :url="userInfo.avatar_url" :width="120" />
				<view class="text m-top-30">{{userInfo.nick_name}}</view>
			</view>
			<!-- 结果 -->
			<view class="layout-result">
				<view>
					<view class="imgbox">
						
						<image class="full" :src="tiku_result.name" mode=""></image>
					</view>
					<view class="num">{{tiku_result.suc}}</view>
						
				</view>

				<view class="btnbox">
					<button class="share-btn" open-type="share">
					 分享成绩到微信
					</button>
				
				</view>
				<view class="btnbox flex justify-between">
					<view class="btn-half">
						<u-button :custom-style="resultBtn" shape="circle" @click="comeBackLink">再来一局</u-button>
					</view>
					<view class="btn-half">
						<u-button :custom-style="resultBtn" shape="circle" @click="isPopup = true">查看答题详情</u-button>
					</view>
				</view>
			</view>
		</view>
		<!-- 弹窗 -->
		<u-popup v-model="isPopup" mode="center" border-radius="14">
			<view class="popup-box">
				<view class="popup-centent bg-white">
					<view class="thead flex justify-end">
						<view class="icon"></view>
						<view class="td flex-1 td-1">题目</view>
						<view class="td td-2">答案</view>
					</view>
					<view class="tbody m-top-10">
						<view class="tr flex align-center" v-for="(item,index) in tiku">
							<view class="icon" v-if="item.is_right">
								<image class="full" src="/static/image/rtrue.png" mode=""></image>
							</view>
							<view class="icon" v-else>
								<image class="full" src="/static/image/rfalse.png" mode=""></image>
							</view>
							<view class="td td-1 flex-1 text-single">
								{{item.title}}
							</view>
							<view class="td td-2 text-single">{{item.content}}</view>
						</view>
						
					</view>
				</view>
				<view class="btnbox">
					<view class="result-btn" @click="isPopup = false">返回</view>
				</view>
			</view>
		</u-popup>
		<!-- 右下角背景图 -->
		<view class="hi">
			<image class="full" src="/static/image/hi.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import AvatarImage from '@/components/avatar-image'
	import * as UserApi from '@/api/user'
	import * as TikuApi from '@/api/dati/index'
	export default {
		components: {

			AvatarImage
		},
		data() {
			return {
				isLoading:true,
				tiku_result: {},
				tiku:[],
				userInfo: {},
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				switchValue: true,
				isPopup: false,
				resultBtn: {
					color: '#ffffff',
					background: '#0197F8',
				},
				id:0
			};
		},
		onLoad(options) {
			this.id=options.id
			this.getResult(options.id)
			this.getUserInfo()
		},
		methods: {
			comeBackLink() {
				// this.$u.route('/pages/me/bank')
				this.$u.route({
					url: 'pagesNew/me/bank',
					type: 'redirectTo',
				})
			},
			getUserInfo() {
				let app = this
				UserApi.info({})
					.then(result => {
						console.log(96)
						app.userInfo = result.data.userInfo

					})
			},
			getResult(id) {
				let app = this
				TikuApi.getResult(id)
					.then(result => {
						console.log(96)
						app.tiku_result = result.data.detail
						app.tiku=result.data.detail.tiku
						app.isLoading=false

					})
			},
			/**
			 * 分享当前页面
			 */
			onShareAppMessage() {
			  const app = this
			  // 构建页面参数
			  const params = app.$getShareUrlParams({ id: app.id });
			  return {
			    title: app.detail.name,
			    path: "/pagesNew/me/result?" + params
			  }
			},
			
			/**
			 * 分享到朋友圈
			 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
			 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
			 */
			onShareTimeline() {
			  const app = this
			  // 构建页面参数
			  const params = app.$getShareUrlParams({ id: app.id });
			  return {
			    title: app.detail.name,
			    path: "/pagesNew/me/result?" + params
			  }
			}
			
		}
		
	}
</script>

<style lang="scss">
	.share-btn{
		background-color: #0197F8;
		color: #FFF;
	  border-radius: 50rpx;
	
	}
	.hi {
		position: fixed;
		right: 0;
		bottom: 100rpx;
		z-index: 1;
		width: 500rpx;
		height: 372rpx;
	}

	.layout-position {
		position: relative;
		z-index: 99;
	}

	.layout-music {
		padding: 20rpx 36rpx;

		.text {
			font-size: 36rpx;
			line-height: 38rpx;
			color: #101010;
		}
	}

	.layout-me {
		padding: 50rpx 0 20rpx 0;

		.text {
			font-size: 32rpx;
			line-height: 36rpx;
			text-align: center;
			color: #101010;
		}
	}

	.layout-result {
		padding: 36rpx 20rpx;

		.imgbox {
			height: 500rpx;
			position: relative;
			top: 0;
		}

		.num {
			position: absolute;
			top: 536rpx;
			right: 215rpx;
			font-size: 28rpx;
			color: #ffaa00;
		}
		.name {
			position: absolute;
			top: 400rpx;
			left: 245rpx;
			font-size: 36rpx;
			color: #ffaa00;
		}
		
	}

	.btnbox {
		width: 580rpx;
		margin: 40rpx auto 0;
	}

	.result-btn {
		height: 80rpx;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 80rpx;
		color: #fff;
		text-align: center;
		background: #0197F8 !important;
		border-radius: 40rpx;
	}

	.btn-half {
		width: 260rpx;
	}

	.popup-box {
		width: 710rpx;
		height: auto;
		padding: 36rpx 0 50rpx;

		.popup-centent {
			padding: 20rpx 20rpx;
			min-height: 300rpx;
			border-radius: 10rpx;
		}

		.icon {
			width: 35rpx;
			height: 35rpx;
		}

		.td-1 {
			padding: 0 36rpx;
		}

		.td-2 {
			width: 180rpx;
			text-align: center;
		}

		.thead {
			font-size: 36rpx;
			font-weight: 600;
			line-height: 48rpx;
			color: #ADADAD;
			text-align: center;
		}

		.tbody {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #101010;
		}
	}

	.tr {
		padding: 8rpx 0;
	}
</style>